<template>
  <view class="content">
    <view class="title_box">
      <text class="green_ornament"></text>
      <text>实验任务详情</text>
    </view>
    <!-- <view class="li_box">
      
      <view class="li_content">
        <view class="li_label">含固率TS</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">%</view>
      </view>
      <view class="li_content">
        <view class="li_label">挥发性固体含量VS</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">%</view>
      </view>
      <view class="li_content">
        <view class="li_label">TS产气率</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">m3/t</view>
      </view>
      <view class="li_content">
        <view class="li_label">VS产气率</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">m3/t</view>
      </view>
      <view class="li_content">
        <view class="li_label">H2S含量</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">PPM</view>
      </view>
      <view class="li_content">
        <view class="li_label">O2含量</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">%</view>
      </view>
      <view class="li_content">
        <view class="li_label">CH4含量</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">%</view>
      </view>
      <view class="li_content">
        <view class="li_label">发酵温度</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
        <view class="suffix">C</view>
      </view>
    </view> -->
    <div class="li_box">
        <view class="li_content">
        <view class="li_label">检测项目</view>
        
      </view>
      <div v-for="item in list">
        <view class="li_content">
        <view class="li_label">{{ item.detectionIndicator }}</view>
        <view class="li_input">
          <input class="border_input" v-model="item.detectionResult" readonly type="text" />
        </view>
        <view class="suffix">{{ item.detectionIndicatorUnit }}</view>
      </view>
      </div>
    </div>
    <!-- <view class="btn_box">接受任务</view> -->
    <view class="btn_box" @click="submit">提交信息</view>
  </view>
</template>
<script>
import { finishData } from '../api/api.js';
export default {
  data() {
    return {
      styles: {
        borderColor: "#1a512c",
      },
      list:[]
    };
  },
  methods:{
    submit(){
      
      let arr = this.list.map((item)=>{
        return{
          id:item.id,
          detectionIndicator:item.detectionIndicator
        }
      });
      finishData({
        id:uni.getStorageSync('expertTaskDetail').id,
        experimentTaskDetailList:arr
      }).then(res=>{
        console.log(res.data);
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            this.list = [];
           uni.navigateBack({
             delta: 2
           });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
        }
      })
    }
  },
  onShow(){
    this.list = uni.getStorageSync('dataList');
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;
  .title_box {
    display: flex;
    align-items: center;
    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }
  .li_box {
    margin-top: 20rpx;
  }
}
.li_content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .li_label {
    font-weight: 700;
    margin-right: 30rpx;
    width: 30%;
  }
  .li_input {
    width: 70%;
    .border_input {
      border: 2rpx solid #1a512c;
      border-radius: 10rpx;
      height: 50rpx;
      width: 100%;
    }
  }
  .suffix {
    display: flex;
    justify-content: flex-end;
    margin-left: 10rpx;
    width: 80rpx;
  }
}
.textarea_border {
  margin-top: 20rpx !important;
  height: 200rpx !important;
}
.btn_box {
  background-color: #1b9c46;
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  width: 100%;
  height: 80rpx;
  border-radius: 10rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
